import { Collapse } from 'antd';
import React, { Component } from 'react';
import 'styles/expense/expense-warn.scss';
import ExpenseMain from './expense-main-service';
import TemplateHoc from '../component/template-hoc';
import shallowEqual from '../component/shallowEqual';

const { Panel } = Collapse;

@TemplateHoc
class ExpenseWarn extends Component {

  static contextTypes = {
    currentExpense: React.PropTypes.object
  };

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    return !shallowEqual(this.props, nextProps) ||
      !shallowEqual(this.state, nextState) ||
      !shallowEqual(this.context, nextContext);
  }

  render() {
    const { currentExpense } = this.context;
    return (
      <section className="expense-warn">
        <Collapse
          expandIconPosition={'right'}
          bordered={'false'}
          accordion
          className={'expense-warn-collapse'}
          defaultActiveKey={['1']}
        >
          <Panel
            header={ExpenseMain.handleLabels(currentExpense).header}
            key="1"
          >
            {ExpenseMain.handleLabels(currentExpense).content}
          </Panel>
        </Collapse>
      </section>
    );
  }
}

ExpenseWarn.propTypes = {};

export default ExpenseWarn;
